<style>
    body {
        background: #f3f3f3;
    }

    .userData .nav {
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        position: relative;
        padding: .5rem 0;
        background: white;
    }

    .userData .nav .userImg {
        width: 3rem;
        height: 3rem;
        position: relative
    }

    .userData .nav .userImg img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
    }

    .userData .nav .userGender {
        position: absolute;
        top: 2.2rem;
        left: 2.5rem;
    }

    .userData .nav .userName {
        margin-top: .5rem;
    }

    .userData .userDesc {
        margin-top: .5rem;
    }

    .userData .userDesc li {
        display: flex;
        flex-direction: row;
        margin-top: 1px;
        padding: .5rem;
        background: white;
        font-size: 80%;
    }

    .userData .userDesc li:nth-child(4) {
        border-bottom: none;
    }

    .userData .userDesc li>p {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 20%;
    }

    .userData .userDesc li>span {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 80%;
        text-align: left;
        margin-left: .5rem;
    }

    .userData .userIdImg {
        display: flex;
        flex-direction: column !important;
    }

    .userData .userIdImg img {
        width: 100%;
        height: 100%;
    }

    .userIdCard {
        margin-top: .5rem;
        margin-bottom: .5rem;
    }

    input:disabled {
        background: none;
    }

    .getCode {
        padding: .3rem .5rem;
        background: #39AC6A;
        border-radius: 1rem;
        color: white;
    }

    .userData .btn {
        padding: .5rem;
        background: white;
        text-align: center;
    }

    .userData .btn button {
        padding: .3rem .5rem;
        background: #39AC6A;
        color: white;
        border-radius: 1rem;
    }
    /* 上传照片 */

    .userData .userdata_img {
        margin-left: 5px;
        margin-top: 10px;
        height: 145px;
        position: relative;
        background: white;
    }

    .userData .userdata_img>img {
        position: absolute;
        width: 100%;
        height: 100%;
        border: none;
        z-index: 2;
    }

    .userData .addImg {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        width: 100%;
        height: 100%;
        color: #CCCCCC;
    }

    .userData .addImg input {
        position: absolute;
        z-index: 3;
        width: 100%;
        height: 100%;
        opacity: 0;
    }

    .userData .order-flexd .row button {
        width: 5rem;
        height: 1.7rem;
        border-radius: 1rem;
        background: none;
        background: #39AC6A;
        color: white;
    }

    .plus {
        position: relative !important;
        width: 3rem !important;
        height: auto !important;
        z-index: 1 !important;
    }

    .subDiv {
        margin-top: 1rem;
        text-align: center;
    }

    .subBtn {
        padding: .3rem 1.3rem;
        color: white;
        background: #39AC6A;
        border-radius: 1rem;
    }

    @media screen and (min-width: 320px) and (max-width: 360px) {
        .userData .nav .userImg {
            width: 4rem;
            height: 4rem;
            position: relative
        }
        .userData .order-flexd .row button {
            width: 5rem;
            height: 1.7rem;
            border-radius: 1rem;
            background: none;
            background: #39AC6A;
            color: white;
        }
        .userPhnoe {
            width: 40%;
        }
        .getCode {
            font-size: 80%；
        }
    }

    @media screen and (min-width: 360px) and (max-width: 413px) {
        .userData .nav .userImg {
            width: 5rem;
            height: 5rem;
            position: relative
        }
        .userData .order-flexd .row button {
            width: 6rem;
            height: 2rem;
            border-radius: 1rem;
            background: none;
            background: #39AC6A;
            color: white;
        }
    }

    @media screen and (min-width: 414px) {
        .userData .nav .userImg {
            width: 3rem;
            height: 3rem;
            position: relative
        }
    }
</style>
<div class="userData">
    <div class="nav">
        <div class="userImg">
            <img ng-src="{{userDesc.header}}" alt="">
        </div>
        <p class="userName">
            {{userDesc.nickname}}
            <i class="iconfont" ng-show="userDesc.sex==1">&#xe60a;</i>
            <i class="iconfont" ng-show="userDesc.sex==2">&#xe793;</i>
        </p>
    </div>
    <ul class="userDesc">
        <li>
            <p>姓 <span>名：</span> </p>
            <span>{{userDesc.name?userDesc.name:Name}}</span></li>
        <li>
            <p>手 <span>机</span>号：</p>
            <span>
                <input type="number" class="userPhnoe" name="userPhone" ng-model="user_Phone" ng-value="userDesc.phone" ng-disabled="userDesc.phone" placeholder="请输入手机号码">
                <button ng-disabled="{{OnClick}}" ng-click="getCode()" class="getCode" ng-if="!userDesc.phone" ng-cloak class="ng-cloak">点击获取验证码</button>
           
            </span>
        </li>
        <li>
            <p>身<span>份</span><span>证</span>号：</p>
            <span>{{userDesc.cert_num?userDesc.cert_num:idNum}}</span>
        </li>
        <!-- <li class="userIdImg">
            <p>身<span>份</span><span>证</span><span>正</span>面</p>
            <div class="userdata_img">
                <img ng-src="{{CARE_Z?CARE_Z:'../gy/images/fanmian.png'}}" alt="" ng-if="!userDesc.cert_img_on">
                <img ng-src="{{httpSrc+userDesc.cert_img_on}}" alt="" ng-if="userDesc.cert_img_on">
                <div class="addImg" ng-show="!userDesc.cert_img_on">
                    <input type="file" accept="image/png,image/gif,image/jpeg,image/jpg" id='CARE_Z' file-model="fileToUpload" />
                </div>
            </div>
            <div class="subDiv" ng-if="!userDesc.cert_img_on">
                <button type="button" ng-click="sendFile(2)" class="subBtn">Submit</button>
            </div>
        </li> -->
        <li class="userIdImg">
            <p>身<span>份</span><span>证</span><span>反</span>面</p>
            <div class="userdata_img">
                <img ng-src="{{CARE_F?CARE_F:'../gy/images/zhengmian.png'}}" alt="" ng-if='!userDesc.cert_img_off'>
                <img ng-src="{{httpSrc+userDesc.cert_img_off}}" alt="" ng-if='userDesc.cert_img_off'>
                <div class="addImg" ng-show="!userDesc.cert_img_off">
                    <input type="file" accept="image/png,image/gif,image/jpeg,image/jpg" id='CARE_F' file-model="fileToUpload" />
                    <!-- <input type="file"  id="postedHouseImg"> -->
                </div>
            </div>
            <div class="subDiv" ng-if="!userDesc.cert_img_off">
                <button type="button" ng-click="sendFile(3)" class="subBtn">提交</button>
            </div>
        </li>

    </ul>
</div>